<template>
  <div class="header">
    <div>
      <router-link class="list-group-item" active-class="active" to="/home"><img src="../assets/index_images/logo.png" alt="" class="logo"></router-link>
      <ul>
        <!--        <li><i class="el-icon-star-off">手机微商城</i></li>-->
        <li><i class="el-icon-shopping-cart-2">
<!--          <router-link class="list-group-item" active-class="active" to="/pay">购物车</router-link>-->
          <a href="#" @click.prevent="toCart">购物车</a>
        </i></li>
        <li><i class="el-icon-wallet">
<!--          <router-link class="list-group-item" active-class="active" to="/myOrder">订单</router-link>-->
          <a href="#" @click.prevent="toOrder">订单</a>
        </i></li>
        <li>
          <el-input
              placeholder="请输入书籍名称或作者名称"
              v-model="keyword">
            <el-button slot="append" icon="el-icon-search"
                       @keyup.enter="enterBtn"
                       @click="searchBtn"></el-button>
          </el-input>
        </li>
        <li v-if="showName==0">
          <router-link class="list-group-item" active-class="active" to="/login">马上登录</router-link>
        </li>
        <li v-if="showName==0">
          <router-link class="list-group-item" active-class="active" to="/register">注册</router-link>
        </li>
        <li v-else>
          <div class="demo-type">
            <div style="margin-top: 1em">
              <a href="#" @click="PersonCenter"><el-avatar shape="square" :size="50" style="margin-right: 10px;"  :src="headImg" ></el-avatar></a>
              <el-button type="primary" @click="PersonCenter" style="height: 0em;line-height: 0;position:relative;top: -15px;">个人中心</el-button>
              <el-button type="danger" @click="open" style="height: 0em; line-height: 0;position: relative;top:-15px">注销</el-button>
<!--              <el-button type="text" @click="open">注销</el-button>-->
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>

export default {
  name: "Header",
  data() {
    return {
      headImg:'',
      showName: window.sessionStorage.getItem('showName') || 0,
      keyword: null
    }
  },
  methods: {
    toOrder(){
      if(window.sessionStorage.getItem('username')!==null){
        this.$router.push('/myOrder')
      }else{
        this.$message.error('未登录，请登录。')
      }
    },
    toCart(){
      if(window.sessionStorage.getItem('username')!==null){
        this.$router.push('/pay')
      }else{
        this.$message.error('未登录，请登录。')
      }
    },
    enterBtn(){
      this.$router.push({path: '/paybook', query: {keyword:this.keyword}})
    },
    searchBtn(){

      this.$router.push({path: '/paybook', query: {keyword:this.keyword}})
      this.keyword = ''
    },
    PersonCenter(){
      this.$router.push('/personCenter')
    },
    open() {
      this.$confirm('您确认注销吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.sessionStorage.clear()
        this.$router.replace('/login')
        location.reload()

      }).catch(() => {
      });
    }
  },
  components: {},
  created() {
    if(window.sessionStorage.getItem('username')){
      this.getRequest('/cms/user/info').then((resp) => {
        console.log(resp)
        // window.sessionStorage.setItem('userId',resp.data.id)
        window.sessionStorage.setItem('headImg',resp.data.headImg)
        this.headImg = window.sessionStorage.getItem('headImg')
      })
    }

  },
  watch:{

  }
}
</script>

<style scoped>
* {
  list-style: none;
}

.logo {
  position: relative;
  top: 0.6em;
}

.header {
  margin: 0 auto;
  width: 89em;
  padding-left: 13em;
  height: 8em;
}

.header::after {
  clear: both;
}

.header ul {
  width: 80%;
  height: 76px;
  /*border: solid 1px black;*/
  display: inline-block;
  line-height: 76px;
}

.header ul > li {
  float: left;
  margin-right: 3em;
  margin-left: 2em;
}

</style>